<template>
  <MainLayout>
    <div class="pt-[90px] 2xl:pl-[185px] lg:pl-[160px] lg:pr-0 pr-2 w-[calc(100%-90px)] max-w-[1800px] 2xl:mx-auto">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="所有学生" name="first">
          <el-table :data="studentData" style="width: 100%">
            <el-table-column prop="stu_id" label="学生学号" />
            <el-table-column prop="stu_name" label="学生姓名" />
            <el-table-column prop="stu_age" label="学生年龄" />
            <el-table-column prop="stu_gander" label="学生性别" />
            <el-table-column prop="stu_address" label="学生户籍" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="所有老师" name="second">
          <el-table :data="teacherData" style="width: 100%">
            <el-table-column prop="tea_id" label="教师编号" />
            <el-table-column prop="tea_name" label="教师姓名" />
            <el-table-column prop="tea_age" label="教师年龄" />
            <el-table-column prop="tea_gander" label="教师性别" />
            <el-table-column prop="tea_address" label="教师户籍" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="每门课程对应的老师信息" name="third">
          <el-table :data="teacherToCourseData" style="width: 100%">
            <el-table-column prop="cour_id" label="课程编号" />
            <el-table-column prop="cour_name" label="课程名称" />
            <el-table-column prop="tea_name" label="教师姓名" />
            <el-table-column prop="tea_id" label="教师编号" />
            <el-table-column prop="tea_age" label="教师年龄" />
            <el-table-column prop="tea_gander" label="教师性别" />
            <el-table-column prop="tea_address" label="教师户籍" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="获取学生成绩" name="fourth">
          <el-select
            v-model="cour_name"
            placeholder="Select"
            size="large"
            style="width: 240px"
            @change="courNameChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-table :data="studentScoreData" style="width: 100%">
            <el-table-column prop="stu_id" label="学生学号" />
            <el-table-column prop="stu_name" label="学生姓名" />
            <el-table-column prop="stu_age" label="学生年龄" />
            <el-table-column prop="stu_gander" label="学生性别" />
            <el-table-column prop="stu_address" label="学生户籍" />
            <el-table-column prop="cour_id" label="课程编号" />
            <el-table-column prop="cour_name" label="课程名称" />
            <el-table-column prop="sco_score" label="课程分数" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="获取最高分" name="five">
          <el-table :data="maxScoreData" style="width: 100%">
            <el-table-column prop="cour_id" label="课程编号" />
            <el-table-column prop="cour_name" label="课程名称" />
            <el-table-column prop="sco_score" label="课程最高分" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </MainLayout>
</template>
<script setup>
import MainLayout from '@/layouts/MainLayout.vue'
import  { 
  getStudentList, 
  getTeacherList, 
  getTeacherToCourseList, 
  getStudentScore,
  getMaxScore
} from '@/composables/school'

const activeName = ref('first')
const cour_name = ref('')
const options = [
  {
    value: '语文',
    label: '语文',
  },
  {
    value: '数学',
    label: '数学',
  },
  {
    value: '英语',
    label: '英语',
  },
  {
    value: '政治',
    label: '政治',
  },
  {
    value: '历史',
    label: '历史',
  }
]
const {data: studentData} = await useAsyncData('student', async () => {
  return await getStudentList().then(res => {
    return res.data
  })
})
const {data: teacherData} = await useAsyncData('teacher', async () => {
  return await getTeacherList().then(res => {
    return res.data
  })
})
const {data: teacherToCourseData} = await useAsyncData('teacherToCourse', async () => {
  return await getTeacherToCourseList().then(res => {
    let list = res.data
    return list
  })
})
const getCourAjax = () => {
  let params = {
    cour_name: cour_name.value
  }
  return getStudentScore(params).then(res => {
    let list = res.data
    return list
  })
}
const courNameChange = async () => {
  studentScoreData.value = await getCourAjax()
}
const {data: studentScoreData} = await useAsyncData('studentScore', async () => {
  return await getCourAjax()
})
const {data: maxScoreData} = await useAsyncData('maxScore', async () => {
  return await getMaxScore().then(res => {
    let list = res.data
    return list
  })
})
</script>
<style scoped>
</style>